/**
 * 问题：类组件中可以使用 PureComponent 来实现性能优化，函数式组件如何实现性能优化
 * 答案：React.memo() 高阶函数，包装下 函数式组件。
 *
 *
 */
import React from "react";
import ReactDOM from "react-dom/client";

/**
 * 当前代码使用了PureComponent之后，Hello 组件每次要更新的时候，内部都做了props的浅比较。
 * 如果 props 没有发生变化，则阻止更新流程，不会执行render
 * 如果 props 发生变化，就不会阻止更新流程，会执行render
 *
 * 初次渲染 Hello 收到的 props 为 {name: '张三'}
 * 当 App 组件的 name 修改时，这时我们 Hello 收到的 props 为 {name: '张三1'} 与上一次的props比较，发现需要更新。
 * 当 App 组件的 age 修改时，这时我们 Hello 收到的 props 为 {name: '张三'} 与上一次的props比较，发现不需要更新。
 *
 *
 * {name: '张三', fn: () => {}}
 * {name: '张三1', fn: () => {}}
 * {name: '张三', fn: () => {}}
 */
class Hello extends React.PureComponent {
  render() {
    console.log("hello render");
    return (
      <div>
        <h1>Hello</h1>
        <p>props.name = {this.props.name}</p>
      </div>
    );
  }
}

// function Hello(props) {
//   console.log("Hello");
//   return (
//     <div>
//       <h1>Hello</h1>
//       <p>props.name = {props.name}</p>
//     </div>
//   );
// }

// // 使用 React.memo 包装 Hello 组件，之后，返回一个新组件，取名我还是叫Hello
// Hello = React.memo(Hello);

class App extends React.Component {
  state = {
    name: "张三",
    age: 18,
  };

  fn1 = () => {
    console.log(1);
  };

  render() {
    return (
      <div>
        <h1>App</h1>
        <button
          onClick={() =>
            this.setState((prevState) => ({ name: prevState.name + 1 }))
          }
        >
          修改 name
        </button>
        <button
          onClick={() =>
            this.setState((prevState) => ({ age: prevState.age + 1 }))
          }
        >
          修改 age
        </button>

        <Hello name={this.state.name} fn={this.fn1} />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
